<template>
  <view class="order-details pos-order-details">
    <view class="header acea-row row-middle">
      <view class="state">{{ title }}</view>
      <view class="data">
        <view class="order-num">订单：{{ orderInfo.order_sn }}</view>
        <view>
          <span class="time">{{ orderInfo.create_time }}</span>
        </view>
      </view>
    </view>
    <view
      class="remarks acea-row"
      v-if="goname != 'looks'"
      style="align-items: center"
    >
      <span class="iconfont icon-zhinengkefu-"></span>
      <view
        class="line1"
        style="text-align: left; flex: 1; margin-left: 10rpx"
        @click="modify('1')"
      >
        {{
          orderInfo.remark ? orderInfo.remark : "订单未备注，点击添加备注信息"
        }}
      </view>
    </view>
    <view class="orderingUser acea-row row-middle">
      <span class="iconfont icon-yonghu2"></span
      >{{ (orderInfo.user && orderInfo.user.nickname) || "" }}
    </view>
    <view class="address">
      <view class="name">
        {{ orderInfo.real_name
        }}<span class="phone">{{ orderInfo.user_phone }}</span>
      </view>
      <view>{{ orderInfo.user_address }}</view>
      <!-- #ifdef H5 -->
      <button
        class="copy copy-data"
        :data-clipboard-text="
          '收货人姓名：' +
          orderInfo.real_name +
          '\n收货人电话：' +
          orderInfo.user_phone +
          '\n收货人地址：' +
          orderInfo.user_address
        "
      >
        复制
      </button>
      <!-- #endif -->
      <!-- #ifdef MP || APP-PLUS -->
      <button class="copy" @tap="copyText">复制</button>
      <!-- #endif -->
    </view>
    <view class="line">
      <image :src="`${domain}/static/images/line.jpg`" />
    </view>
    <view class="pos-order-goods">
      <!-- /pages/goods_details/index?id=${item.cart_info.product.product_id} -->
      <navigator
        :url="``"
        hover-class="none"
        class="goods"
        v-for="(item, index) in orderInfo.orderProduct"
        :key="index"
      >
        <view class="acea-row row-between-wrapper">
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image
                :src="
                  item.cart_info.productAttr.image ||
                  item.cart_info.product.image
                "
              />
            </view>
            <view class="text acea-row row-between row-column">
              <view class="info line2">
                {{ item.cart_info.product.store_name }}
              </view>
              <view class="attr">{{
                item.cart_info.productAttr.sku || "默认"
              }}</view>
            </view>
          </view>
          <view class="money">
            <view class="x-money"
              >￥{{ item.cart_info.productAttr.price }}元/天</view
            >
            <view class="num"
              >x{{ item.product_num }}
              <text
                class="font-color refund_num"
                v-if="item.product_num - item.refund_num > 0"
                >(-{{ item.product_num - item.refund_num }})</text
              >
            </view>
            <!-- <view v-if="orderInfo.order_type == 0" class="y-money">
							￥{{ item.cart_info.productAttr.ot_price }} 元/天</view> -->
          </view>
        </view>
      </navigator>
    </view>
    <view class="public-total">
      共{{ orderInfo.total_num }}件商品，已支付
      <span class="money">￥{{ orderInfo.pay_price }}</span> ( 邮费 ¥{{
        orderInfo.pay_postage
      }})
    </view>
    <view class="wrapper">
      <view class="item acea-row row-between">
        <view>订单编号：</view>
        <view class="conter acea-row row-middle row-right">
          {{ orderInfo.order_sn }}
          <!-- #ifdef H5 -->
          <button
            class="copy copy-data"
            :data-clipboard-text="orderInfo.order_sn"
          >
            复制
          </button>
          <!-- #endif -->
          <!-- #ifdef MP || APP-PLUS -->
          <span class="copy copy-data" @click="copyNum(orderInfo.order_sn)"
            >复制</span
          >
          <!-- #endif -->
        </view>
      </view>
      <view class="item acea-row row-between">
        <view>下单时间：</view>
        <view class="conter">{{ orderInfo.create_time }}</view>
      </view>
      <view class="item acea-row row-between">
        <view>起租日期：</view>
        <view class="conter">{{ orderInfo.lease_begin_date }}</view>
      </view>
      <view class="item acea-row row-between">
        <view>预计归还：</view>
        <view class="conter">{{ orderInfo.expected_return_date }}</view>
      </view>
      <view class="item acea-row row-between">
        <view>租赁时长：</view>
        <view class="conter">{{ orderInfo.lease_days }}天</view>
      </view>
      <view class="item acea-row row-between">
        <view>押金：</view>
        <view class="conter">{{ orderInfo.deposit }}元</view>
      </view>
      <view class="item acea-row row-between">
        <view>支付状态：</view>
        <view class="conter">
          {{ orderInfo.paid == 1 ? "已支付" : "未支付" }}
        </view>
      </view>
      <view class="item acea-row row-between">
        <view>支付方式：</view>
        <view class="conter">
          {{
            orderInfo.pay_type == 0
              ? "余额支付"
              : orderInfo.pay_type == 1 ||
                orderInfo.pay_type == 2 ||
                orderInfo.pay_type == 3
              ? "微信支付"
              : "支付宝支付"
          }}
        </view>
      </view>
      <view class="item acea-row row-between">
        <view>买家留言：</view>
        <view class="conter">{{ orderInfo.mark }}</view>
      </view>
      <view class="item acea-row row-between" v-if="orderInfo.video">
        <view>视频：</view>
        <video
          :src="orderInfo.video"
          style="width: 220rpx; height: 220rpx"
        ></video>
      </view>
      <view
        class="item acea-row row-between"
        style="justify-content: space-between;display: flex; width: 100%;"
        v-if="imagesall.length > 0"
      >
        <view>图片：</view>
        <view class="picture">
          <view class="images" v-for="(item, index) in imagesall">
            <image :src="item" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <view v-if="orderInfo.order_extend" class="wrapper">
      <view
        v-for="(item, index) in orderInfo.order_extend"
        v-if="item && index"
        :key="index"
        class="item acea-row row-between"
      >
        <view>{{ index }}：</view>
        <view v-if="!Array.isArray(item)" class="conter">{{ item }}</view>
        <view v-else class="conter virtual_image">
          <image
            v-for="(pic, i) in item"
            :key="i"
            class="picture"
            :src="pic"
            @click="getPhotoClickIdx(item, i)"
          ></image>
        </view>
      </view>
    </view>
    <view class="wrapper">
      <view class="item acea-row row-between">
        <view>支付金额：</view>
        <view class="conter">￥{{ orderInfo.total_price }}</view>
      </view>
      <view v-if="orderInfo.coupon_price > 0" class="item acea-row row-between">
        <view>优惠券抵扣：</view>
        <view class="conter">-￥{{ orderInfo.coupon_price }}</view>
      </view>
      <view
        v-if="orderInfo.integral_price > 0"
        class="item acea-row row-between"
      >
        <view>积分抵扣：</view>
        <view class="conter">-￥{{ orderInfo.integral_price }}</view>
      </view>
      <view v-if="orderInfo.pay_postage > 0" class="item acea-row row-between">
        <view>运费：</view>
        <view class="conter">￥{{ orderInfo.pay_postage }}</view>
      </view>
      <view
        class="actualPay acea-row row-right"
        style="justify-content: space-between"
      >
        <view class="" style="color: red" v-if="orderInfo.overdue_date">
          已逾期
        </view>
        <span class="money font-color-red"
          ><text style="color: black">实付款：</text>￥{{
            orderInfo.pay_price
          }}</span
        >
      </view>
    </view>

    <view
      class="wrapper"
      v-if="
        orderInfo.delivery_type != '3' &&
        orderInfo.order_type === 0 &&
        orderInfo.delivery_type
      "
    >
      <view
        v-if="orderInfo.delivery_type != '6'"
        class="item acea-row row-between"
      >
        <view>配送方式：</view>
        <view
          class="conter"
          v-if="
            orderInfo.delivery_type === '1' || orderInfo.delivery_type === '4'
          "
        >
          快递
        </view>
        <view class="conter" v-if="orderInfo.delivery_type === '2'">送货</view>
      </view>
      <view class="item acea-row row-between">
        <view
          v-if="
            orderInfo.delivery_type === '1' || orderInfo.delivery_type === '4'
          "
          >快递公司：</view
        >
        <view v-if="orderInfo.delivery_type === '2'">送货人：</view>
        <view v-if="orderInfo.delivery_type === '6'">发货方式：</view>
        <view class="conter line1">{{
          orderInfo.delivery_name ? orderInfo.delivery_name : ""
        }}</view>
      </view>
      <view class="item acea-row row-between">
        <view
          v-if="
            orderInfo.delivery_type === '1' || orderInfo.delivery_type === '4'
          "
          >快递单号：</view
        >
        <view v-if="orderInfo.delivery_type === '2'">送货人电话：</view>
        <view v-if="orderInfo.delivery_type === '6'">卡密信息：</view>
        <view class="conter" style="display: flex">
          <text>{{ orderInfo.delivery_id ? orderInfo.delivery_id : "" }}</text>
          <!-- #ifndef H5 -->
          <text class="copy" @tap="copyKm">复制</text>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <text
            class="copy copy-data"
            :data-clipboard-text="orderInfo.delivery_id"
            >复制</text
          >
          <!-- #endif -->
        </view>
      </view>
    </view>
    <view style="height: 100upx"></view>
    <view class="footer acea-row row-right row-middle" v-if="goname != 'looks'">
      <view class="bnt delivery" @click="goEnd()">去完结</view>
      <!-- <view class="more"></view> -->
      <view class="bnt cancel" @click="modify('0')" v-if="orderInfo.paid == 0">
        一键改价
      </view>
      <navigator
        v-if="
          orderInfo.status != -1 && orderInfo.status < 9 && orderInfo.paid == 1
        "
        class="bnt cancel"
        :url="
          '/pages/admin/refundList/index?mer_id=' +
          mer_id +
          '&order_id=' +
          orderInfo.order_id
        "
      >
        立即退款
      </navigator>
      <view class="bnt cancel" @click="modify('1')">订单备注</view>
      <view
        class="bnt cancel"
        v-if="orderInfo.pay_type === 'offline' && orderInfo.paid === 0"
        @click="offlinePay"
      >
        确认付款
      </view>
      <navigator
        class="bnt delivery"
        v-if="
          orderInfo.paid == 1 &&
          orderInfo.status == 0 &&
          orderInfo.order_type == 0
        "
        :url="
          '/pages/admin/delivery/index?id=' +
          orderInfo.order_id +
          '&merId=' +
          mer_id
        "
        >去发货</navigator
      >
      <view
        class="bnt delivery"
        v-if="
          orderInfo.paid == 1 &&
          (orderInfo.status == 0 || orderInfo.status == 9) &&
          orderInfo.order_type == 1
        "
        @click="goCancellation"
        >去核销</view
      >
    </view>
    <!-- v-if="
          orderInfo.paid == 1 &&
          (orderInfo.status == 0 || orderInfo.status == 9) &&
          orderInfo.order_type == 1
        " -->
    <PriceChange
      :change="change"
      :orderInfo="orderInfo"
      v-on:closechange="changeclose($event)"
      v-on:savePrice="savePrice"
      :status="status"
    ></PriceChange>
  </view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import PriceChange from "@/components/PriceChange";
// #ifdef H5
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
// #endif
import {
  getAdminOrderDetail,
  setAdminOrderPrice,
  setAdminOrderRemark,
  setOfflinePay,
  setOrderRefund,
  orderEnd,
  orderCancellation,
} from "@/api/admin";
import { isMoney } from "@/utils/validate.js";
import { HTTP_REQUEST_URL } from "@/config/app";
export default {
  name: "AdminOrder",
  components: {
    PriceChange,
  },
  props: {},
  data: function () {
    return {
      imagesall: [],
      order: false,
      change: false,
      order_id: "",
      mer_id: "",
      orderInfo: {
        _status: {},
        user: {},
      },
      domain: HTTP_REQUEST_URL,
      status: "",
      title: "",
      payType: "",
      types: "",
      clickNum: 1,
      goname: "",
    };
  },
  watch: {
    "$route.params.oid": function (newVal) {
      let that = this;
      if (newVal != undefined) {
        that.order_id = newVal;
        that.getIndex();
      }
    },
  },
  onLoad: function (option) {
    let self = this;
    console.log(option)
    this.order_id = option.id;
    this.mer_id = option.mer_id;
    this.goname = option.goname;
    this.getIndex();
    // #ifdef H5
    this.$nextTick(function () {
      var clipboard = new ClipboardJS(".copy-data");
      clipboard.on("success", function (e) {
        self.$util.Tips({
          title: "复制成功",
        });
      });
      clipboard.on("error", function (e) {
        self.$util.Tips({
          title: "复制失败",
        });
      });
    });
    // #endif
  },
  methods: {
    goEnd() {
      console.log(this.order_id);
      console.log(this.mer_id);

      let that = this;
      orderEnd(that.mer_id, that.order_id).then(
        (res) => {
          console.log(res.status);
          if (res.status == 200) {
            that.$util.Tips({
              title: "已完结",
              icon: "success",
            });
            setTimeout((res) => {
              uni.redirectTo({
                url: `/pages/admin/orderList/index?types=6&merId=${that.mer_id}`,
              });
            }, 1000);
          }
        },
        (err) => {}
      );
    },
    more: function () {
      this.order = !this.order;
    },
    modify: function (status) {
      this.change = true;
      this.status = status;
    },
    changeclose: function (msg) {
      this.change = msg;
    },
    // 图片预览
    getPhotoClickIdx(list, idx) {
      uni.previewImage({
        current: list[idx], //  传 Number H5端出现不兼容
        urls: list,
      });
    },
    /**
     *
     * 剪切卡密内容
     */
    // #ifndef H5
    copyKm: function () {
      let that = this;
      uni.setClipboardData({
        data: that.orderInfo.delivery_id,
        success: function (res) {},
      });
    },
    // #endif
    copyText: function (e) {
      let arr = [
        {
          name: "收货人姓名",
          value: this.orderInfo.real_name,
        },
        {
          name: "收货人电话",
          value: this.orderInfo.user_phone,
        },
        {
          name: "收货人地址",
          value: this.orderInfo.user_address,
        },
      ];
      wx.setClipboardData({
        data: `${arr.map((item) => `${item.name}: ${item.value}`).join("\n")}`,
        success: function (res) {
          wx.getClipboardData({
            success: function (res) {
              wx.showToast({
                title: "复制成功",
              });
            },
          });
        },
      });
    },
    getIndex: function () {
      console.log(this.order_id)
      
      let that = this;
      getAdminOrderDetail(that.mer_id, that.order_id).then(
        (res) => {
          that.orderInfo = res.data;
          that.imagesall = res.data.image.split(",");
        },
        (err) => {
          that.$util.Tips(
            {
              title: err,
            },
            {
              tab: 3,
              url: 1,
            }
          );
        }
      );
    },
    /*核销订单*/
    goCancellation() {
      let that = this;
      console.log(that.orderInfo)
      uni.navigateTo({
        url:
          "/pages/admin/cancellate_result/index?mer_id=" +
          that.mer_id +
          "&cal_code=" +
          that.orderInfo.verify_code,
      });
    },
    async savePrice(opt) {
      let that = this,
        data = {},
        price = opt.price,
        refund_price = opt.refund_price,
        refund_status = that.orderInfo.refund_status,
        remark = opt.remark;
      data.order_id = that.orderInfo.order_id;
      if (that.status == 0) {
        // if (!isMoney(price)) {
        // 	return that.$util.Tips({
        // 		title: '请输入正确的金额'
        // 	});
        // }
        data.price = price;
        let parmas = {
          pay_postage: opt.orderInfo.pay_postage,
          coupon_price: opt.orderInfo.coupon_price,
          total_price: Number(opt.orderInfo.total_price),
        };
        setAdminOrderPrice(that.mer_id, data.order_id, parmas).then(
          (res) => {
            that.change = false;
            that.$util.Tips({
              title: "改价成功",
              icon: "success",
            });
            that.getIndex();
          },
          (err) => {
            console.log(err, "err");
            that.change = false;
            that.$util.Tips({
              title: err,
            });
          }
        );
      } else if (that.status == 0 && refund_status === 1) {
        if (!isMoney(refund_price)) {
          return that.$util.Tips({
            title: "请输入正确的金额",
          });
        }
        data.price = refund_price;
        data.type = opt.type;
        setOrderRefund(that.mer_id, data).then(
          (res) => {
            that.change = false;
            that.$util.Tips({
              title: res.message,
            });
            that.getIndex();
          },
          (err) => {
            console.log(err, "err");
            that.change = false;
            that.$util.Tips({
              title: err,
            });
          }
        );
      } else {
        if (!remark) {
          return this.$util.Tips({
            title: "请输入备注",
          });
        }
        // data.remark = remark;
        console.log(data);
        setAdminOrderRemark(that.mer_id, data.order_id, {
          remark: remark,
        }).then(
          (res) => {
            that.change = false;
            this.$util.Tips({
              title: res.message,
              icon: "success",
            });
            that.getIndex();
          },
          (err) => {
            that.change = false;
            that.$util.Tips({
              title: err,
            });
          }
        );
      }
    },
    offlinePay: function () {
      setOfflinePay(this.mer_id, {
        order_id: this.orderInfo.order_id,
      }).then(
        (res) => {
          this.$util.Tips({
            title: res.msg,
            icon: "success",
          });
          this.getIndex();
        },
        (err) => {
          this.$util.Tips({
            title: err,
          });
        }
      );
    },
    copyNum(id) {
      uni.setClipboardData({
        data: id,
        success: function () {
          console.log("success");
        },
      });
    },
    copyData(id) {
      uni.setClipboardData({
        data: id,
        success: function () {
          console.log("success");
        },
      });
    },
    // #ifdef H5
    webCopy(item, index) {
      console.log("yunxingle");
      let items = item;
      let indexs = index;
      let self = this;

      if (self.clickNum == 1) {
        console.log("22");
        self.clickNum += 1;
        self.webCopy(items, indexs);
      }
    },
    // #endif
  },
};
</script>

<style lang="scss">
/*商户管理订单详情*/
.pos-order-details .header {
  background: #ff6b00;
  // background: -webkit-linear-gradient(180deg, #ff6b00 0%, rgba(34, 145, 248, 0) 100%);
  // background: -moz-linear-gradient(180deg, #ff6b00 0%, rgba(34, 145, 248, 0) 100%);
}

.pos-order-details .header .state {
  font-size: 36upx;
  color: #fff;
}

.pos-order-details .header .data {
  margin-left: 35upx;
  font-size: 28upx;
}

.pos-order-details .header .data .order-num {
  font-size: 30upx;
  margin-bottom: 8upx;
}

.pos-order-details .remarks {
  width: 100%;
  height: 86upx;
  background-color: #fff;
  padding: 0 30upx;
}

.pos-order-details .remarks .iconfont {
  font-size: 40upx;
  color: #ff6b00;
}

.pos-order-details .remarks input {
  width: 630upx;
  height: 100%;
  font-size: 30upx;
}

.pos-order-details .remarks input::placeholder {
  color: #666;
}

.pos-order-details .orderingUser {
  font-size: 26upx;
  color: #282828;
  padding: 0 30upx;
  height: 67upx;
  background-color: #fff;
  margin-top: 16upx;
  border-bottom: 1px solid #f5f5f5;
}

.pos-order-details .orderingUser .iconfont {
  font-size: 40upx;
  color: #ff6b00;
  margin-right: 15upx;
}

.pos-order-details .address {
  margin-top: 0;
}

.pos-order-details .pos-order-goods {
  margin-top: 17upx;
}

.pos-order-details .footer .more {
  font-size: 27upx;
  color: #aaa;
  width: 100upx;
  height: 64upx;
  text-align: center;
  line-height: 64upx;
  margin-right: 25upx;
  position: relative;
}

.pos-order-details .footer .delivery {
  background:#ff6b00;
  // background: -webkit-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
  // background: -moz-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
}

.pos-order-details .footer .more .order .arrow {
  width: 0;
  height: 0;
  border-left: 11upx solid transparent;
  border-right: 11upx solid transparent;
  border-top: 20upx solid #e5e5e5;
  position: absolute;
  left: 15upx;
  bottom: -18upx;
}

.pos-order-details .footer .more .order .arrow:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 9upx solid transparent;
  border-right: 9upx solid transparent;
  border-top: 19upx solid #fff;
  position: absolute;
  left: -10upx;
  bottom: 0;
}

.pos-order-details .footer .more .order {
  width: 200upx;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10upx;
  position: absolute;
  top: -200upx;
  z-index: 9;
}

.pos-order-details .footer .more .order .item {
  height: 77upx;
  line-height: 77upx;
}

.pos-order-details .footer .more .order .item ~ .item {
  border-top: 1px solid #f5f5f5;
}

.pos-order-details .footer .more .moreName {
  width: 100%;
  height: 100%;
}

/*订单详情*/
.order-details .header {
  padding: 0 30upx;
  height: 150upx;
}

.order-details .header.on {
  background-color: #666 !important;
}

.order-details .header .pictrue {
  width: 110upx;
  height: 110upx;
}

.order-details .header .pictrue image {
  width: 100%;
  height: 100%;
}

.order-details .header .data {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24upx;
  margin-left: 27upx;
}

.order-details .header.on .data {
  margin-left: 0;
}

.order-details .header .data .state {
  font-size: 30upx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 7upx;
}

/* .order-details .header .data .time{margin-left:20upx;} */
.order-details .nav {
  background-color: #fff;
  font-size: 26upx;
  color: #282828;
  padding: 25upx 0;
}

.order-details .nav .navCon {
  padding: 0 40upx;
}

.order-details .nav .navCon .on {
  font-weight: bold;
  color: #e93323;
}

.order-details .nav .progress {
  padding: 0 65upx;
  margin-top: 10upx;
}

.order-details .nav .progress .line {
  width: 100upx;
  height: 2upx;
  background-color: #939390;
}

.order-details .nav .progress .iconfont {
  font-size: 25upx;
  color: #939390;
  margin-top: -2upx;
  width: 30upx;
  height: 30upx;
  line-height: 33upx;
  text-align: center;
  margin-right: 0 !important;
}

.order-details .address {
  font-size: 26upx;
  color: #868686;
  background-color: #fff;
  padding: 25upx 30upx 30upx 30upx;
  position: relative;
}

.order-details .address .name {
  font-size: 30upx;
  color: #282828;
  margin-bottom: 0.1rem;
}

.order-details .address .name .phone {
  margin-left: 40upx;
}

.order-details .line {
  width: 100%;
  height: 3upx;
}

.order-details .line image {
  width: 100%;
  height: 100%;
  display: block;
}

.order-details .wrapper {
  background-color: #fff;
  margin-top: 12upx;
  padding: 30upx;
}

.order-details .wrapper .item {
  font-size: 28upx;
  color: #282828;
}

.order-details .wrapper .item ~ .item {
  margin-top: 20upx;
}

.order-details .wrapper .item .conter {
  color: #868686;
  text-align: right;
  max-width: 450rpx;
}

.order-details .wrapper .item .virtual_image {
  // text-align: left;
  margin-left: 50rpx;
}

.order-details .wrapper .item .virtual_image .picture {
  width: 106rpx;
  height: 106rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;

  &:last-child {
    margin-right: 0;
  }
}

.order-details .wrapper .item .conter .copy {
  font-size: 20rpx;
  color: #868686;
  border-radius: 3rpx;
  border: 1px solid #868686;
  padding: 0rpx 15rpx;
  margin-left: 24rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
}

.address .copy {
  font-size: 20rpx;
  color: #868686;
  border-radius: 3rpx;
  border: 1px solid #868686;
  padding: 0rpx 15rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  position: absolute;
  right: 30rpx;
  top: 20rpx;
}

.order-details .wrapper .actualPay {
  border-top: 1upx solid #eee;
  margin-top: 30upx;
  padding-top: 30upx;
}

.order-details .wrapper .actualPay .money {
  font-weight: bold;
  font-size: 30upx;
}

.order-details .footer {
  width: 100%;
  height: 100upx;
  height: calc(100upx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100upx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 0 30upx;
  border-top: 1px solid #eee;
}

.order-details .footer .bnt {
  width: auto;
  height: 60upx;
  line-height: 60upx;
  text-align: center;
  line-height: upx;
  border-radius: 50upx;
  color: #fff;
  font-size: 27upx;
  padding: 0 3%;
}

.order-details .footer .bnt.cancel {
  color: #aaa;
  border: 1px solid #ddd;
}

.order-details .footer .bnt.default {
  color: #444;
  border: 1px solid #444;
}

.order-details .footer .bnt ~ .bnt {
  margin-left: 18upx;
}

.pos-order-goods {
  padding: 0 30upx;
  background-color: #fff;
  position: relative;
}

.pos-order-goods .goods {
  padding: 20rpx 0;
  overflow: hidden;
}

.pos-order-goods .goods ~ .goods {
  border-top: 1px dashed #e5e5e5;
}

.pos-order-goods .goods .picTxt {
  width: 515upx;
}

.pos-order-goods .goods .picTxt .pictrue {
  width: 130upx;
  height: 130upx;
}

.pos-order-goods .goods .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6upx;
}

.pos-order-goods .goods .picTxt .text {
  width: 365upx;
  height: 130upx;
}

.pos-order-goods .goods .picTxt .text .info {
  font-size: 28upx;
  color: #282828;
}

.pos-order-goods .goods .picTxt .text .attr {
  font-size: 24upx;
  color: #999;
}

.pos-order-goods .goods .money {
  width: 164upx;
  text-align: right;
  font-size: 28upx;
}

.pos-order-goods .goods .money .refund_num {
  display: inline-block;
  margin-left: 10rpx;
}

.pos-order-goods .goods .money .x-money {
  color: #282828;
}

.pos-order-goods .goods .money .num {
  color: #ff9600;
  margin: 5upx 0;
}

.pos-order-goods .goods .money .y-money {
  color: #999;
  text-decoration: line-through;
}

.pos-order-goods .cancellate {
  font-size: 24rpx;
  float: right;
  margin-top: 10rpx;

  text {
    margin-left: 26rpx;
  }
}

.pos-order-goods .cancelled {
  color: #ff9600;
}

.pos-order-goods .goods .uncancell {
  color: #999999;
}

.public-total {
  font-size: 28upx;
  color: #282828;
  border-top: 1px solid #eee;
  height: 92upx;
  line-height: 92upx;
  text-align: right;
  padding: 0 30upx;
  background-color: #fff;
}

.public-total .money {
  color: #ff4c3c;
}

.images image {
  height: 200upx;
  width: 200upx;
}

.picture {
  // width: 600upx;
  display: flex;
  flex-wrap: wrap;
}
</style>